import React from 'react';
import {
  View,
  Text,
} from 'react-native';

import PostRequestListAction from '../../actions/post/PostRequestListAction';
import {DateUtils} from '../../utils/Utils';
import BaseItem from '../common/BaseItem';
import CommonListPage from '../common/CommonListPage';
import TImage from '../../components/TImage';
import Constants from '../../common/Constants';
import PostConstants from '../../common/PostConstants';
import ToastUtils from '../../common/ToastUtils';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';

export default class SportGonggaoPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._dataKey = "post_id";
  }

  _onRenderItem(data, index) {
    return <Item data={data} key={index}/>
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.sport_gonggao_content, data);
  }

  _requestData(page, listView) {
    new PostRequestListAction().call(listView, {board_id:PostConstants.BOARD_ID.SPORT_GONGGAO, page:page, page_size:10, sort_id:1});
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style={{flex:1, flexDirection:"row",
            paddingTop:SizeUtils.translateDesignHeightToCode(20),
            paddingBottom:SizeUtils.translateDesignHeightToCode(20),
          }}>
          {this._renderShowImage(this.props.data)}
          <View style={{flex:1, flexDirection: "column", justifyContent:"space-between",
                paddingLeft:SizeUtils.translateDesignWidthToCode(20),
                paddingTop:SizeUtils.translateDesignHeightToCode(10),
                paddingBottom:SizeUtils.translateDesignHeightToCode(10),}}>
              <Text numberOfLines={1}
                style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
                  fontSize:SizeUtils.translateFontSizeToCode(32),}}>
                  {this.props.data.title}
              </Text>
              <Text
                style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
                  fontSize:SizeUtils.translateFontSizeToCode(26),
                    paddingTop:SizeUtils.translateDesignHeightToCode(10)}}>
                  {this._getBottomText()}
              </Text>
          </View>
      </View>
    )
  }

  _renderShowImage(data) {
    if (data.image_url || (data.image_urls && data.image_urls && data.image_urls.length > 0)) {
      return <TImage source={this._getImageSource(data)}
        style={{width:180, height:130}} resizeMode={"contain"}/>
    }
  }

  _getImageSource(data) {
    if(data.image_url) {
      return {uri:data.image_url};
    }
    else if (data.image_urls && data.image_urls && data.image_urls.length > 0) {
      return {uri:data.image_urls[0]};
    }
    else {
      return {uri:""};
    }
  }

  _getBottomText() {
    return this.props.data.readers_num + " 阅读 " + DateUtils.formatDateMnD(this.props.data.posted_at);
  }
}
